<script setup lang="ts">
import { ref } from 'vue';
import { Switch, Select, InputNumber, Button } from 'ant-design-vue';

defineOptions({
  name: 'OtherConfig',
});

// 配置数据
const systemSettings = ref({
  darkMode: false,
  autoSave: true,
  notifications: true,
  language: 'zh-CN',
  refreshInterval: 30,
  cacheEnabled: true,
});

// 语言选项
const languageOptions = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
  { label: '繁體中文', value: 'zh-TW' },
];

// 开关配置项
const switchSettings = [
  {
    key: 'darkMode',
    title: '深色模式',
    description: '启用深色主题界面',
  },
  {
    key: 'autoSave',
    title: '自动保存',
    description: '自动保存用户配置和数据',
  },
  {
    key: 'notifications',
    title: '系统通知',
    description: '接收系统通知和提醒',
  },
  {
    key: 'cacheEnabled',
    title: '启用缓存',
    description: '提高系统响应速度',
  },
];

// 保存设置
const saveSettings = () => {
  console.log('保存设置:', systemSettings.value);
  // 这里可以添加保存逻辑
};

// 重置设置
const resetSettings = () => {
  systemSettings.value = {
    darkMode: false,
    autoSave: true,
    notifications: true,
    language: 'zh-CN',
    refreshInterval: 30,
    cacheEnabled: true,
  };
};
</script>

<template>
  <div class="other-config-container">
    <!-- 界面设置 Block -->
    <div class="config-block">
      <h3 class="block-title">界面设置</h3>

      <div class="select-item">
        <div class="select-content">
          <span class="select-label">系统语言</span>
          <span class="select-description">选择系统显示语言</span>
        </div>
        <Select
          v-model:value="systemSettings.language"
          :options="languageOptions"
          style="width: 120px"
          size="small"
        />
      </div>

      <div class="number-item">
        <div class="number-content">
          <span class="number-label">刷新间隔</span>
          <span class="number-description">自动刷新间隔时间（秒）</span>
        </div>
        <InputNumber
          v-model:value="systemSettings.refreshInterval"
          :min="10"
          :max="300"
          :step="10"
          size="small"
          style="width: 120px"
        />
      </div>
    </div>

    <!-- 功能设置 Block -->
    <div class="config-block">
      <h3 class="block-title">功能设置</h3>

      <div
        v-for="setting in switchSettings"
        :key="setting.key"
        class="switch-item"
      >
        <div class="switch-content">
          <span class="switch-label">{{ setting.title }}</span>
          <span class="switch-description">{{ setting.description }}</span>
            </div>
        <Switch
          v-model:checked="systemSettings[setting.key as keyof typeof systemSettings]"
          size="small"
        />
            </div>
    </div>

    <!-- 操作按钮 Block -->
    <div class="config-block">
      <h3 class="block-title">配置管理</h3>

      <div class="button-group">
        <Button
          type="primary"
          @click="saveSettings"
          style="margin-right: 12px"
        >
          💾 保存设置
        </Button>
        <Button
          @click="resetSettings"
        >
          🔄 重置设置
        </Button>
      </div>

      <div class="config-info">
        <p class="info-text">
          💡 提示：设置会自动保存到本地存储，刷新页面后仍然有效。
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.other-config-container {
  padding: 1.5rem 0;
  max-width: 100%;
}

.config-block {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: hsl(var(--popover));
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
}

.block-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
}

.switch-item,
.select-item,
.number-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.switch-item:last-child,
.select-item:last-child,
.number-item:last-child {
  border-bottom: none;
}

.switch-content,
.select-content,
.number-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.switch-label,
.select-label,
.number-label {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.switch-description,
.select-description,
.number-description {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  }

.button-group {
  margin-bottom: 1rem;
  }

.config-info {
  padding: 1rem;
  background-color: hsl(var(--accent));
  border-radius: 0.375rem;
  border-left: 4px solid hsl(var(--primary));
}

.info-text {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

/* 深色主题通过CSS变量自动适配 */
</style>
